<template>
  <Card :bordered="false" dis-hover>
    <Button
      type="primary"
      class="ivu-mb-16"
      @click="handleAdd"
      v-hasC="{
        name: 'v1-settings-videotype-add',
        flag: 'v1/settings/videotype/add',
      }"
      >新增</Button
    >
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      v-hasC="{
        name: 'v1-settings-videotype-list',
        flag: 'v1/settings/videotype/list',
      }"
    >
      <template #status="{ row }">
        <Badge v-if="row.status == 0" status="warning" text="停用" />
        <Badge v-else status="processing" text="正常" />
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-settings-videotype-edit',
            flag: 'v1/settings/videotype/edit',
          }"
          >编辑</a
        >
        <Divider type="vertical"></Divider>
        <a
          @click="handleDelete(row)"
          class="delete"
          v-hasC="{
            name: 'v1-settings-videotype-del',
            flag: 'v1/settings/videotype/del',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      :total="total"
      class="ivu-mt-16"
      v-model="params.page"
      :page-size="params.pageSize"
      @on-change="formSize"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="formChangePage"
      v-hasC="{
        name: 'v1-settings-videotype-list',
        flag: 'v1/settings/videotype/list',
      }"
    />
    <Modal
      :title="add ? '新增' : '编辑'"
      width="600"
      v-model="articleModal"
      :mask-closable="false"
      :draggable="true"
      footer-hide
    >
      <Form :label-width="80" :model="formData" ref="formItem" :rules="rules">
        <FormItem label="名称" prop="name">
          <Input placeholder="请输入类型名称" v-model="formData.name" />
        </FormItem>
        <FormItem label="排序" prop="sort" class="ivu-inline-block">
          <InputNumber :precision="0" :min="0" v-model="formData.sort" />
        </FormItem>

        <FormItem label="状态" prop="status">
          <Switch v-model="formData.status" />
        </FormItem>
      </Form>
      <div slot="footer" class="modalFoot">
        <Button @click="canceledit()">取消</Button>
        <Button
          :loading="subloading"
          type="primary"
          @click="sendData"
          class="ivu-ml-16"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import { videoTypeList,videoTypeHandle ,videoTypeDel} from "@/api/jzy";
export default {
  name: "videotype",
  data() {
    return {
      add: true,
      total: 0,
      articleModal: false,
      subloading: false,
      params: {
        page:1,
        pageSize: 10
      },
      formData: {
        name: "",
        sort: 1,
        status: true,
      },
      rules: {
        name: [
          { required: true, message: "请输入类型名称", trigger: "bulr" },
          { trigger: "bulr", validator: this.watermarkContentVaild },
        ]
      },
      columns: [
        {
          title: "名称",
          key: "name",
        },
        {
          title: "排序",
          key: "sort",
        },
        {
          title: "状态",
          slot: "status",
        },
        {
          title: "创建时间",
          key: "created_at",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      list: [],
      loading: false,
    };
  },
  methods: {
    watermarkContentVaild (rule, value, callback) {
      let length = value.replace(/[^\x00-\xff]/g, "01").length
      if (length > 12) {
        callback(new Error("请输入1~6个汉字"))
      } else {
        callback()
      }
    },
    askData() {
      this.params.page = 1;
      this.getData();
    },
    getData() {
      const params = this.params;
      this.loading = true;
      videoTypeList(params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    sendData() {      
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
            this.subloading=true
            let params={...this.formData}
            params.status=params.status?'1':'0'
            videoTypeHandle(params).then(res=>{
                this.articleModal = false;
                this.getData();
            })
            .finally(() => {
             this.subloading = false;
            });
        }
      });
    },
    canceledit() {
      this.articleModal = false;
    },
    formSize(e) {
      this.params.page = e;
      this.getData();
    },
    formChangePage(e) {
      this.params.pageSize = e;
      this.askData();
    },
    handleAdd() {
      this.add = true;
      this.articleModal = true;
      this.$refs['formItem'].resetFields() 
      this.formData= {
        name: '',
        sort:1,
        status:true,
      }     
    },
    handleEdit(row) {
      this.add = false;
      this.articleModal = true;
      this.$refs['formItem'].resetFields()
      this.formData= {
        id:row.id,
        name: row.name,
        sort: +row.sort,
        status: +row.status?true:false,
      }
    },
    handleDelete(row) {
      this.$Modal.confirm({
        title: "温馨提示",
        content: "确定删除此项?",
        onOk: () => {
          videoTypeDel({ id: row.id }).then((res) => {
            this.$Message.success("删除成功！");
            this.askData();
          });
        },
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang='less' scoped>
.delete {
  color: rgb(226, 5, 5);
}
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
</style>
